<template>
  <div class="inquiry-list">
    <!-- 搜索筛选区域 -->
    <el-card class="filter-card">
      <el-form :model="searchForm" inline>
        <el-form-item label="询标标题">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入询标标题"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="searchForm.status"
            placeholder="请选择状态"
            clearable
            style="width: 150px"
          >
            <el-option label="全部" value="" />
            <el-option label="进行中" value="active" />
            <el-option label="已完成" value="completed" />
            <el-option label="已取消" value="cancelled" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <i class="el-icon-search"></i>
            搜索
          </el-button>
          <el-button @click="handleReset">
            <i class="el-icon-refresh"></i>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-card">
      <div slot="header" class="table-header">
        <span>询标列表</span>
        <el-button type="primary" size="small" @click="handleAdd">
          <i class="el-icon-plus"></i>
          新增询标
        </el-button>
      </div>
      
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="询标标题" min-width="200" />
        <el-table-column prop="company" label="询标公司" width="150" />
        <el-table-column prop="contact" label="联系人" width="120" />
        <el-table-column prop="phone" label="联系电话" width="130" />
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag
              :type="getStatusType(scope.row.status)"
              size="small"
            >
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" />
        <el-table-column label="操作" width="180" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="viewDetails(scope.row)"
            >
              查看详情
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              style="color: #f56c6c"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { GetInquiryReplyRecordsAdmin } from '@/api/BidderInquiry'

export default {
  name: 'InquiryList',
  data() {
    return {
      loading: false,
      searchForm: {
        title: '',
        status: '',
        dateRange: []
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 20,
        total: 0
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    async fetchData() {
      this.loading = true
      try {
        const params = {
          pageIndex: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          key: this.searchForm.title || '',
          start: this.searchForm.dateRange && this.searchForm.dateRange[0] ? this.searchForm.dateRange[0] : '',
          end: this.searchForm.dateRange && this.searchForm.dateRange[1] ? this.searchForm.dateRange[1] : ''
        }
        
        const response = await GetInquiryReplyRecordsAdmin(params)
        
        if (response && response.Data) {
          // 转换数据格式以匹配表格显示
          this.tableData = response.Data.map(item => ({
            id: item.Id,
            title: item.InquiryContent || '询标内容',
            company: item.CompanyName || '未知公司',
            contact: item.ContactPerson || '未知',
            phone: item.ContactPhone || '未知',
            status: this.getStatusFromData(item),
            createTime: item.CreateTime || item.ReplyTime || '未知时间'
          }))
          this.pagination.total = response.Total || 0
        } else {
          this.tableData = []
          this.pagination.total = 0
        }
      } catch (error) {
        console.error('获取数据失败:', error)
        this.$message.error('获取数据失败: ' + (error.message || '未知错误'))
        this.tableData = []
        this.pagination.total = 0
      } finally {
        this.loading = false
      }
    },
    
    // 从数据中获取状态
    getStatusFromData(item) {
      // 根据实际数据结构判断状态
      if (item.ReplyTime) {
        return 'completed' // 已回复
      } else if (item.DeadlineTime && new Date(item.DeadlineTime) < new Date()) {
        return 'cancelled' // 已过期
      } else {
        return 'active' // 进行中
      }
    },
    
    // 搜索
    handleSearch() {
      this.pagination.currentPage = 1
      this.fetchData()
    },
    
    // 重置
    handleReset() {
      this.searchForm = {
        title: '',
        status: '',
        dateRange: []
      }
      this.handleSearch()
    },
    
    // 新增
    handleAdd() {
      this.$message.info('新增询标功能待开发')
    },
    
    // 编辑
    handleEdit(row) {
      this.$message.info(`编辑询标: ${row.title}`)
    },
    
    // 删除
    handleDelete(row) {
      this.$confirm('确定要删除这条询标记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
        this.fetchData()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    
    // 查看详情
    viewDetails(row) {
      this.$message.info(`查看详情: ${row.title}`)
    },
    
    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        active: 'success',
        completed: 'info',
        cancelled: 'danger'
      }
      return statusMap[status] || 'info'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        active: '进行中',
        completed: '已完成',
        cancelled: '已取消'
      }
      return statusMap[status] || '未知'
    },
    
    // 分页大小改变
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.fetchData()
    },
    
    // 当前页改变
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.fetchData()
    }
  }
}
</script>

<style scoped>
.inquiry-list {
  padding: 24px;
}

.filter-card {
  margin-bottom: 24px;
}

.table-card {
  min-height: 600px;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .inquiry-list {
    padding: 16px;
  }
  
  .el-form--inline .el-form-item {
    display: block;
    margin-bottom: 16px;
  }
  
  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}
</style>